<script>
    var vm = new Vue({
        el: '#content',
        data: {
            userList: [],
            pageInfo:[],
            id:"",
            msg:"",
            user:{id:'',name:'',password:'',email:'',role:'',state:""}
        },
        created: function (){
            $.ajax({
                //几个参数需要注意一下
                type: "GET",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/page/admin/getAllUser?pagenum=1&pagesize=3",//url
                success: function (result) {
                    console.log(result.data);//打印服务端返回的数据(调试用)
                    vm.userList = result.data.list;
                    vm.pageInfo=result.data;
                },
                error: function () {
                    alert("异常！");
                }
            });
        },
        methods:{
            queryDeviceRecords:function (pagenum) {
                // $('#userlist').html("");
                $.ajax({
                    //几个参数需要注意一下
                    type: "GET",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/page/admin/getAllUser",//url
                    data:{"pagenum":pagenum,"pagesize":$('#pagesize').val()},
                    success: function (result) {
                        console.log(result.data);//打印服务端返回的数据(调试用)
                        vm.userList = result.data.list;
                        vm.pageInfo=result.data;
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            delUserById:function () {
                $.ajax({
                    //几个参数需要注意一下
                    type: "GET",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/page/admin/delUserById",//url
                    data:{"id":vm.id},
                    success: function (result) {
                         console.log(result);//打印服务端返回的数据(调试用)
                        if(result.res==1){
                            $('#myModal').modal('hide');
                            $('#myModal2').modal('show');
                            vm.msg = result.msg;
                            var num=2;
                            var txtnum1 = setInterval(function () {
                                if (num==0) {
                                    this.$options.methods.closeAndFlush();
                                    clearInterval(txtnum1);
                                }
                                num--;
                            },1000);
                        }
                        // vm.userList = result.data.list;
                        // vm.pageInfo=result.data;
                    },
                    error: function () {
                        alert("异常！");
                    }
                });

            },
            modal:function (id,username) {
                $('#myModal' ).modal('show');
                vm.id=id;
                vm.msg = "是否删除"+username+"用户？";
            },
            openmymodel:function (id,name,password,email,role,state) {
                vm.user.id=id;
                vm.user.name=name;
                vm.user.password=password;
                vm.user.email=email;
                vm.user.role=role;
                vm.user.state=state;
                console.log(vm.user);
                $('#myModal1' ).modal('show');
            },
            updateUserById:function () {
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/page/admin/updateUserById",//url
                    data:$('#form2').serialize(),
                    success: function (result) {
                        console.log(result);//打印服务端返回的数据(调试用)
                        if(result.res==1){
                            $('#myModal1' ).modal('hide');
                            $('#btn-sure').remove();
                            vm.msg = result.msg;
                            $('#myModal2' ).modal('show');
                            var num=2;
                            var txtnum = setInterval(function () {
                                if (num==0) {
                                    this.$options.methods.closeAndFlush();
                                    clearInterval(txtnum);
                                }
                                num--;
                            },1000);
                        }
                        // vm.userList = result.data.list;
                        // vm.pageInfo=result.data;
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            closeAndFlush:function () {
                $('#myModal2' ).modal('hide');
                this.$options.methods.queryDeviceRecords(vm.pageInfo.pageNum);
            }
        }
    });
</script>
<div class="table-responsive" id="userlist">
    <p style="font-size: 50px;font-family: 华文行楷;margin-top: 20px">用户列表</p>
    <table class="table table-hover">
        <thead>
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>Password</td>
            <td>Email</td>
            <td>Role</td>
            <td>State</td>
            <td>Edit</td>
            <td>Delete</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="value in userList">
            <td>{{value.id}}</td>
            <td>{{value.name}}</td>
            <td>{{value.password}}</td>
            <td>{{value.email}}</td>
            <td>{{value.role}}</td>
            <td>{{value.state}}</td>
            <td><button class="btn btn-sm btn-primary" v-on:click="openmymodel(value.id,value.name,value.password,value.email,value.role,value.state)">编辑</button></td>
            <td><button class="btn btn-sm btn-danger" v-on:click="modal(value.id,value.name)">删除</button></td>
        </tr>
        </tbody>
    </table>
    <div class="row">
        <div class="message col-sm-4">
            共<i class="blue">{{pageInfo.total}}</i>条记录，当前显示第&nbsp;<i
                class="blue">{{pageInfo.pageNum}}/{{pageInfo.pages}}</i>&nbsp;页
            &nbsp;每页<input id="pagesize" type="number" value="{{pageInfo.pageSize}}" size="5">条

        </div>
        <div class="col-sm-8" style="text-align:center;">
            <ul class="pagination" style="margin: 0px">
                <li v-if="!pageInfo.isFirstPage"><a href="javascript:void(0)" v-on:click="queryDeviceRecords(1)">首页</a></li>
                <li v-if="!pageInfo.isFirstPage"><a href="javascript:void(0)" v-on:click="queryDeviceRecords(pageInfo.prePage)">上一页</a></li>
                <li v-for="value in pageInfo.navigatepageNums">
                    <a href="javascript:void(0)" v-on:click="queryDeviceRecords(value)">{{value}}</a>
                </li>
                <li v-if="!pageInfo.isLastPage"><a href="javascript:void(0)" v-on:click="queryDeviceRecords(pageInfo.nextPage)">下一页</a></li>
                <li v-if="!pageInfo.isLastPage"><a href="javascript:void(0)" v-on:click="queryDeviceRecords(pageInfo.pages)">最后一页</a></li>

            </ul>
        </div>
    </div>
    <!--删除模态框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">警告</h4>
                </div>
                <div class="modal-body">{{msg}}</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="btn-sure" class="btn btn-primary" v-on:click="delUserById()">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!--编辑模态框-->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">修改用户信息</h4>
                </div>
                <div class="modal-body">
                    <form id="form2">
                        <input type="hidden" name="id" value="{{user.id}}">
                        <div class="form-group">
                            <label for="name-input">Name</label>
                            <input type="text" name="name" class="form-control" id="name-input" placeholder="name" value="{{user.name}}">
                        </div>
                        <div class="form-group">
                            <label for="password-input">Password</label>
                            <input type="text" name="password" class="form-control" id="password-input" placeholder="password" value="{{user.password}}" readonly="readonly">
                        </div>
                        <div class="form-group">
                            <label for="name-email">Email</label>
                            <input type="email" name="email" class="form-control" id="name-email" placeholder="Email" value="{{user.email}}">
                        </div>
                        <div class="form-group">
                            <label for="role-select">Role</label>
                            <select class="form-control" id="role-select" name="role">
                                <option value="admin" v-if="user.role==='admin'" selected="selected">管理员</option>
                                <option value="admin" v-else>管理员</option>
                                <option value="teacher" v-if="user.role==='teacher'" selected="selected">教师</option>
                                <option value="teacher" v-else>教师</option>
                                <option value="user" v-if="user.role==='user'" selected="selected">普通用户</option>
                                <option value="user" v-else>普通用户</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>State</label>
                            <label class="radio-inline">
                                <input type="radio" name="state" id="inlineRadio1" value="1" v-if="user.state===1" checked="checked">
                                <input type="radio" name="state" id="inlineRadio2" value="1" v-else> 激活
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="state" id="inlineRadio3" value="0" v-if="user.state===0" checked="checked">
                                <input type="radio" name="state" id="inlineRadio4" value="0" v-else> 停用
                            </label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" v-on:click="updateUserById()">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">消息</h4>
                </div>
                <div class="modal-body">{{msg}}</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" v-on:click="closeAndFlush()">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>